<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="企业名称查询"
          :clearable="true"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.lender_idcard"
          placeholder="身份证号码查询"
          :clearable="true"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="经营者名称查询"
          :clearable="true"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          type="primary"
          :loading="exportLoading"
          @click="exportExcel('项目受理：推荐项目')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:itemStatus="scope">
        <span class="badge" :class="`badge-${scope.row.itemStatusStyle}`">
          {{ scope.row.itemStatusLabel }}
        </span>
      </template>
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <c-form-dialog
      label-width="200px"
      ref="form"
      title="项目受理"
      :form-items="formItems"
      :form-data="formData"
      :table-name="putTableName"
      :before-save="handleBeforeSave"
      :table-id="tableId"
      :auto-close="false"
      :submit="false"
      :dismiss="false"
      :visible.sync="approvalVisible"
    >
      <el-form-item>
        <el-button
          @click="handleApprovalPass"
          class="btn-long"
          type="success"
          :loading="approvalLoading"
        >
          确认受理
        </el-button>
        <el-button
          @click="handleApprovalReject"
          class="btn-long"
          type="danger"
          :loading="approvalLoading"
        >
          拒绝受理
        </el-button>
      </el-form-item>
    </c-form-dialog>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs v-model="active">
        <el-tab-pane label="数字档案卡" name="file">
          <credit-file :query-id="queryId" :viewMode="true"></credit-file>
        </el-tab-pane>
        <el-tab-pane label="政府推荐函" v-if="+relatedData.submit_type === 1">
          <recommend-file :related-data="relatedData"></recommend-file>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="reportVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <credit-edit :visible.sync="creditVisible" :queryId="creditId"></credit-edit>
  </div>
</template>

<script>
import taskTableMixin from '@/bank/mixin/taskTable'
// import { enumApproveStatus } from '@/bank/plugins/enum'
import CreditFile from '@/bank/components/creditFile/index'
import CreditEdit from '@/bank/components/creditFile/CreditDialog'
import RecommendFile from '@/credit/views/city/program/RecommendFile'
import AttachView from '@/credit/components/AttachView'
import { phoneValidator } from '@/common/plugins/validator'
import SelectAddress from '@/components/select/SelectAddress'
import { mapGetters } from 'vuex'
export default {
  components: {
    CreditFile,
    SelectAddress,
    RecommendFile,
    AttachView,
    CreditEdit,
  },
  mixins: [taskTableMixin],
  props: {},
  data() {
    return {
      // enumApproveStatus,
      order: {
        recommend_time: 'desc',
      },
      reportVisible: false,
      queryId: '',
      active: 'file',
      relatedData: {},
      params: {
        index: 1,
        size: 10,
        'gua_type.in': '0,1,2,4',
        'claim_status.eq': '0',
      },
      tableName: 'customer_related',
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '受理类型', prop: 'project_type', align: 'center' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '推荐时间', prop: 'recommend_time', align: 'center' } },
        { attrs: { label: '推荐机构', prop: 'source', align: 'center' } },
        {
          attrs: { label: '项目状态', prop: 'itemStatusLabel', align: 'center' },
          slot: 'itemStatus',
        },
        {
          attrs: { label: '操作', align: 'center', minWidth: '100' },
          operations: [
            {
              content: '受理',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
            },
            { content: '数字信用档案', icon: 'fa fa-file-text', event: this.handleCreditEdit },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      tableCount: 0,
      approvalVisible: false,
      putTableName: 'customer_related',
      formItems: [
        {
          tag: 'input',
          itemAttrs: { label: '申请金额' },
          attrs: { key: 'apply_funds', value: '', disabled: true },
          tagSlots: [{ name: 'append', slot: '万元' }],
        },
        {
          tag: 'number',
          itemAttrs: {
            label: '银行预审金额',
            rules: [
              { required: true, message: '请填写银行预审金额', trigger: 'blur' },
              {
                validator: (rule, value, callback) => {
                  value = Number(value)
                  if (value <= 0) {
                    return callback(new Error('金额不能小于等于0'))
                  }
                  callback()
                },
                trigger: 'blur',
              },
            ],
          },
          attrs: { key: 'bank_approved_funds', value: '' },
          tagSlots: [{ name: 'append', slot: '万元' }],
        },
        {
          tag: 'number',
          itemAttrs: {
            label: '贷款年限',
            rules: [{ required: true, message: '请填写贷款年限', trigger: 'blur' }],
          },
          attrs: { key: 'approval_load_years', value: '' },
          tagSlots: [{ name: 'append', slot: '年' }],
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '项目经理',
            rules: [{ required: true, message: '请填写银行项目经理', trigger: 'blur' }],
          },
          attrs: { key: 'bank_approved_person', class: 'form-control-ml', value: '' },
        },
        {
          tag: 'input',
          itemAttrs: {
            label: '联系电话',
            rules: [
              { required: true, message: '请输入手机号码', trigger: 'blur' },
              { validator: phoneValidator, message: '请输入正确的手机号码', trigger: 'blur' },
            ],
          },
          attrs: { key: 'bank_approved_person_mobile', value: '', placeholder: '请输入联系电话' },
        },
      ],
      formData: {},
      tableId: '',
      approvalLoading: false,
      creditVisible: false,
      creditId: '',
    }
  },
  computed: {
    ...mapGetters(['org', 'user']),
  },
  watch: {},
  mounted() {},
  created() {
    this.params['public_bank_ids.like'] = this.clientId
    this.getData()
  },
  methods: {
    dataAdapter(item) {
      item.source = +item.submit_type === 1 ? item.submit_person_name : item.submit_client_name
      item.project_type = '推荐项目'
      item.recommend_time = this.$utils.dateFormat(item.recommend_time, 'yyyy-MM-dd')
      item.itemStatusLabel = '未受理'
      item.itemStatusStyle = 'warning'
      return item
    },
    handleEdit(row) {
      this.formData = row ? { ...row } : {}
      this.formData.approval_load_years = this.formData.approval_load_years
        ? this.formData.approval_load_years
        : this.formData.load_years
      this.formData.bank_approved_person_mobile = this.formData.bank_approved_person_mobile
        ? this.formData.bank_approved_person_mobile
        : this.user.phoneNumber
      this.formData.bank_approved_person = this.formData.bank_approved_person
        ? this.formData.bank_approved_person
        : this.user.realName
      this.formData.bank_approved_funds = this.formData.bank_approved_funds
        ? this.formData.bank_approved_funds
        : this.formData.apply_funds
      this.approvalVisible = true
    },
    handleCreditEdit(row) {
      this.creditVisible = true
      this.creditId = row.customer_related_id
    },
    handleView(row) {
      this.active = 'file'
      this.queryId = row.customer_related_id
      this.reportVisible = true
      this.relatedData = row
    },
    async handleBeforeSave(model) {
      const id = this.formData.customer_related_id
      this.approvalLoading = true
      const [res] = await this.$utils.promise(
        this.$api.updateData(this.$serviceName, 'customer_related', id, {
          ...model,
          claim_status: 1,
          claim_time: this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
          bank_id: this.clientId,
          bank_code: this.org.orgCode,
          bank_name: this.org.orgName,
        })
      )
      this.approvalLoading = false
      if (res) {
        this.$message.success('受理成功')
        this.getData()
        this.$store.dispatch('getTaskCount')
        this.approvalVisible = false
      } else {
        this.$message.error('受理失败，请重试')
      }
    },
    handleApprovalPass() {
      this.$refs.form.submit()
    },
    async handleApprovalReject() {
      const id = this.formData.customer_related_id
      this.$prompt('请输入未通过原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: value => (!value ? '请输入不通过原因' : true),
      })
        .then(({ value }) => {
          this.approvalLoading = true
          this.$api
            .updateData(this.$serviceName, 'customer_related', id, {
              claim_time: this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              claim_status: 2,
              bank_id: this.clientId,
              bank_code: this.org.orgCode,
              bank_name: this.org.orgName,
              claim_des: value,
              bank_approved_person: this.user.userId,
            })
            .then(() => {
              this.$message.success('项目已拒绝')
              this.getData()
              this.$store.dispatch('getTaskCount')
            })
            .finally(() => {
              this.approvalLoading = false
              this.approvalVisible = false
            })
            .catch(() => this.$message.error(`项目拒绝失败，请重试`))
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
